const path = require('path')
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
const resolve = dir => path.join(__dirname, dir)
const IS_PROD = process.env.NODE_ENV === 'production'
const pxtorem = require('postcss-pxtorem')
const autoprefixer = require('autoprefixer')
module.exports = {
  publicPath: './',
  outputDir: 'dist',
  assetsDir: 'static',
  lintOnSave: !IS_PROD,
  productionSourceMap: false,
  devServer: {
    port: 8090,
    open: true,
    overlay: {
      //  当出现编译器错误或警告时，在浏览器中显示全屏覆盖层
      warnings: false,
      errors: true
    }
    // proxy: {}
  },
  css: {
    extract: IS_PROD, // 是否使用css分离插件
    sourceMap: false,
    loaderOptions: {
      // 使用postcss做rem适配和自动添加前缀
      postcss: {
        plugins: [
          autoprefixer(),
          pxtorem({
            rootValue: 37.5,
            propList: ['*']
          })
        ]
      },
      less: {
        javascriptEnabled: true,
        modifyVars: {
          // 直接覆盖变量
          // navbar
          '@nav-bar-background-color': '@primary-color',
          '@nav-bar-arrow-size': '20px',
          '@nav-bar-text-color': '@white',
          '@nav-bar-title-text-color': '@white',
          '@nav-bar-icon-color': '@white',
          '@nav-bar-height': '@nav-height'
          // // 或者可以通过 less 文件覆盖（
          // hack: `true; @import path.resolve(__dirname, 'src/assets/css/variables.less');`
        }
      }
    }
  },
  chainWebpack: config => {
    // loader
    config.module.rules.delete('svg')
    config.module
      .rule('svg-sprite-loader')
      .test(/\.svg$/)
      .include.add(resolve('src/assets/svgs'))
      .end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]'
      })
      .end()
      .before('svg-sprite-loader')
      .use('svgo-loader')
      .loader('svgo-loader')
      .options({
        plugins: [{ name: 'removeAttrs', params: { attrs: 'path:fill' }}]
      })
      .end()
    /**
     * 打包分析
     */
    if (IS_PROD) {
      config.plugin('webpack-report').use(BundleAnalyzerPlugin, [
        {
          analyzerMode: 'static'
        }
      ])
    }
    config
      // https://webpack.js.org/configuration/devtool/#development
      .when(!IS_PROD, config => config.devtool('cheap-source-map'))
    config.optimization.splitChunks({
      chunks: 'all',
      cacheGroups: {
        // cacheGroups 下可以可以配置多个组，每个组根据test设置条件，符合test条件的模块
        commons: {
          name: 'chunk-commons',
          test: resolve('src/components'),
          minChunks: 3, //  被至少用三次以上打包分离
          priority: 5, // 优先级
          reuseExistingChunk: true // 表示是否使用已有的 chunk，如果为 true 则表示如果当前的 chunk 包含的模块已经被抽取出去了，那么将不会重新生成新的。
        },
        node_vendors: {
          name: 'chunk-libs',
          chunks: 'initial', // 只打包初始时依赖的第三方
          test: /[\\/]node_modules[\\/]/,
          priority: 10
        },
        vantUI: {
          name: 'chunk-vantUI', // 单独将 vantUI 拆包
          priority: 20, // 数字大权重高，满足多个 cacheGroups 的条件时候分到权重高的
          test: /[\\/]node_modules[\\/]_?vant(.*)/
        }
      }
    })
    config.optimization.runtimeChunk('single')
  },
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'less',
      patterns: [
        path.resolve(__dirname, 'src/assets/css/variables.less'),
        path.resolve(__dirname, 'src/assets/css/mixins.less')
      ],
      injector: 'append' // 可选'prepend'和'append',
    }
  }
}
